<script lang="ts">
import {defineAsyncComponent, defineComponent, h} from "vue"
import {useSmsTemplate} from "./../SmsHook"
import {TableColumn} from "@/components/AppTable/TableType";
import {usePopupComponent} from "@/components/FunctionComponents";

export default defineComponent({
  name: "SmsTemplate",


  setup() {
    /**
     * 获取模板数据
     */
    const {getSmsTemplateList, smstmp} = useSmsTemplate()


    /**
     * 列配置
     */
    const columns: TableColumn[] = [
      {prop: "KEY", minWidth: 130, label: "调用名"},
      {prop: "TEMPLATE_ID", minWidth: 120, label: "模板ID"},
      {prop: "DESCRIPTION", minWidth: 150, showOverflowTooltip: true, label: "模板描述"},
      {prop: "CONTENT", minWidth: 250, showOverflowTooltip: true, label: "模板内容"},
      {prop: "action", label: "操作", width: 75, fixed: "right", type: "action", remove: false}
    ]


    /**
     * 数据操作
     * @param action
     * @param row
     */
    function tableAction(action: string, row: any) {
      if (action === 'update') {
        const component: any = h(defineAsyncComponent(() => import("./SmsTemplateForm.vue")), {
          data: row, onSuccess: getSmsTemplateList
        })
        usePopupComponent("编辑短信模板", component)
      }
    }

    return {
      getSmsTemplateList, smstmp, columns, tableAction
    }
  }
})
</script>

<template>
  <app-table height="540px" size="small" @action="tableAction" :data="smstmp" :columns></app-table>
</template>